<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户口碑</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./swiper/css/swiper.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="./swiper/js/swiper.js"></script>

</head>
<body>
<div class="wrapper">
<!--    模块一-->
    <div class="header">
        <div class="nav">
            <ul>
                <li>
                    <a href=""><span>首页</span></a>
                </li>
                <li>
                    <a href=""><span>家装案例</span></a>
                </li>
                <li>
                    <a href=""><span>全案套餐</span></a>
                </li>
                <li>
                    <a href=""><span>设计师</span></a>
                </li>
                <li>
                    <a href=""><span>优惠活动</span></a>
                </li>
                <li>
                    <a href=""><span>紫晶工程</span></a>
                </li>
                <li>
                    <a href=""><span>家装攻略</span></a>
                </li>
                <li>
                    <a href=""><span>VR全景</span></a>
                </li>
                <li>
                    <a href=""><span>无忧服务</span></a>
                </li>
            </ul>
        </div>
        <div class="photo">
            <img src="./img/banner.jpg" alt="">
        </div>
</div>
<!--    模块二-->
    <div class="main">
        <div>
            <p id="p1">当前位置：首页&gt;客户口碑</p>
            <p id="p2"><b>客户口碑</b>&nbsp;&nbsp;最真实的用户体验</p>
        </div>


        <!-- Swiper -->
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img class="img" src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>

                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img/测试图1.jpg" alt="">
                    <div class="left-word">
                        <div>
                            <p class="p1">年入百万的设计师住什么样的家？看完才明白什么叫高配版生活！</p>
                        </div>
                        <div class="div2">
                            <p>
                                年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                                做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                                舒适度并存的家，对于别墅装修设计也颇具心得。
                            </p>
                        </div>
                        <div class="div3">
                            <p><img class="img1" src="img/浏览.png" alt="">&nbsp;&nbsp; 浏览次数：280 <a href="javascript:void 0 ;">了解详情&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- Add Arrows -->
        <div class="button-next"><img src="img/右.png" alt=""></div>
        <div class="button-prev"><img src="img/左.png" alt=""></div>

        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                <div class="swiper-slide" >
                    <div>
                        <img src="img/测试图2.jpg" alt="">
                    </div>
<!--                       <div class="">-->
<!--                           <p>年入百万的设计师住什么样的家...</p>-->
<!--                           <p>她获奖无数，也为数百个家庭打造出...</p>-->
<!--                       </div>-->

                </div>

                <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                </div>
                <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                </div>
                <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                </div>
                <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                </div>
                <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                </div>
                <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                </div> <div class="swiper-slide" >
                     <img src="img/测试图2.jpg" alt="">
                </div> <div class="swiper-slide" >
                    <img src="img/测试图2.jpg" alt="">
                 </div>
            </div>

        </div>
    </div>

<!--    模块三-->
    <div class="start-business">
        <div class="start-main">
            <div class="div4">
                <h1>开业大吉</h1>
                <p>项目遍及各大楼盘</p>
            </div>
            <div class="div5"><img src="img/开工大吉.png" alt=""></div>
            <div class="div6">
                <img src="img/锦旗赠送拷贝.jpg" alt="">
            </div>
        </div>

    </div>

<!--    模块四-->
    <!-- <div class="khzy">
        <div class="container">
            <div class="pzsl">
                <div class="col-md-6 col-md-offset-3">
                    <h1>
                        <span>客户好评</span>
                    </h1>
                    <h6> 好服务换来好评如潮</h6>
                </div>
            </div>
            <div class="qyue zhenyan">
                <div class="swiper-container zhenyans">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="img/2.png"></div>
                        <div class="swiper-slide"><img src="img/3.png"></div>
                        <div class="swiper-slide"><img src="img/4.png"></div>
                        <div class="swiper-slide"><img src="img/5.png"></div>
                        <div class="swiper-slide"><img src="img/6.png"></div>
                        <div class="swiper-slide"><img src="img/7.png"></div>
                        <div class="swiper-slide"><img src="img/8.png"></div>
                        <div class="swiper-slide"><img src="img/9.png"></div>
                        <div class="swiper-slide"><img src="img/2.png"></div>
                        <div class="swiper-slide"><img src="img/3.png"></div>
                        <div class="swiper-slide"><img src="img/4.png"></div>
                        <div class="swiper-slide"><img src="img/5.png"></div>
                    </div>
                </div>
                Add Arrows -->
                <!-- <div class="button-next"><img src="img/右.png" alt=""></div>
                <div class="button-prev"><img src="img/左.png" alt=""></div>
            </div>
            <div class="box1"></div>
        </div> -->

        <div class="appraise">
            <div class="pzsl">
                <div class="col-md-6 col-md-offset-3">
                    <h1>
                        <span>客户好评</span>
                    </h1>
                    <h6> 好服务换来好评如潮</h6>
                </div>
            </div>

            <div class="float-photo">
                <div>
                    <img src="img/测试图3.jpg" alt="" width="300">
                    <p class="p5">年入百万的设计师住什么样的家？看完...</p>
                    <p class="p6">
                        年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                        做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                        舒适度并存的家，对于别墅装修设计也颇具心得。
                    </p>
                    <p class="p7"><img src="img/image1.png" alt="" width="50"> <em>江薇</em>&nbsp;&nbsp;&nbsp;主案设计师 <a href="java:void 0;">找TA设计</a> </p>
                </div>
                <div>
                    <img src="img/测试图3.jpg" alt="" width="300">
                    <p class="p5">年入百万的设计师住什么样的家？看完...</p>
                    <p class="p6">
                        年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                        做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                        舒适度并存的家，对于别墅装修设计也颇具心得。
                    </p>
                    <p class="p7"><img src="img/image1.png" alt="" width="50"> <em>江薇</em>&nbsp;&nbsp;&nbsp;主案设计师 <a href="java:void 0;">找TA设计</a> </p>
                </div>
                <div>
                    <img src="img/测试图3.jpg" alt="" width="300">
                    <p class="p5">年入百万的设计师住什么样的家？看完...</p>
                    <p class="p6">
                        年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                        做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                        舒适度并存的家，对于别墅装修设计也颇具心得。
                    </p>
                    <p class="p7"><img src="img/image1.png" alt="" width="50"> <em>江薇</em>&nbsp;&nbsp;&nbsp;主案设计师 <a href="java:void 0;">找TA设计</a> </p>
                </div>
         </div>
            <div class="float-photo photo2">
                <div>
                    <img src="img/测试图3.jpg" alt="" width="300">
                    <p class="p5">年入百万的设计师住什么样的家？看完...</p>
                    <p class="p6">
                        年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                        做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                        舒适度并存的家，对于别墅装修设计也颇具心得。
                    </p>
                    <p class="p7"><img src="img/image1.png" alt="" width="50"> <em>江薇</em>&nbsp;&nbsp;&nbsp;主案设计师 <a href="java:void 0;">找TA设计</a> </p>
                </div>
                <div>
                    <img src="img/测试图3.jpg" alt="" width="300">
                    <p class="p5">年入百万的设计师住什么样的家？看完...</p>
                    <p class="p6">
                        年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                        做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                        舒适度并存的家，对于别墅装修设计也颇具心得。
                    </p>
                    <p class="p7"><img src="img/image1.png" alt="" width="50"> <em>江薇</em>&nbsp;&nbsp;&nbsp;主案设计师 <a href="java:void 0;">找TA设计</a> </p>
                </div>
                <div>
                    <img src="img/测试图3.jpg" alt="" width="300">
                    <p class="p5">年入百万的设计师住什么样的家？看完...</p>
                    <p class="p6">
                        年入百万的设计师住什么样的家？看完才明白什么叫高配版生活。
                        做了十几年的设计，她获奖无数，也为数百个家庭打造出了颜值与
                        舒适度并存的家，对于别墅装修设计也颇具心得。
                    </p>
                    <p class="p7"><img src="img/image1.png" alt="" width="50"> <em>江薇</em>&nbsp;&nbsp;&nbsp;主案设计师 <a href="java:void 0;">找TA设计</a> </p>
                </div>
            </div>
    </div>
        <div id="demo2-1"></div>
</div>


<!-- Initialize Swiper -->
<script>

    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 30,
        slidesPerView: 4,
        loop:true,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        // loop: true,
        autoplay:true,
        navigation: {
            nextEl: '.button-next',
            prevEl: '.button-prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });


</script>

    <script>
        var zhenyans = new Swiper('.zhenyans', {
            slidesPerView: 4,
            spaceBetween: 10,
            loop: true,
            navigation: {
                nextEl: '.button-next',
                prevEl: '.button-prev',

            },
        });
    </script>

        <script src="layui/layui.js"></script>
        <script>
            layui.use(['laypage', 'layer'], function(){
                var laypage = layui.laypage
                    ,layer = layui.layer;



                //自定义样式
                laypage.render({
                    elem: 'demo2'
                    ,count: 100
                    ,theme: '#1E9FFF'
                });
                laypage.render({
                    elem: 'demo2-1'
                    ,count: 100
                    ,theme: '#FF5722'
                });
                laypage.render({
                    elem: 'demo2-2'
                    ,count: 100
                    ,theme: '#FFB800'
                });



            });
        </script>

</body>
</html>